<template>
  <div class="carManage">
    <el-row>
      <el-col :span="24"
              class="carTop-col">
        <el-col :span="6">
          <el-button type="primary"
                     icon="el-icon-plus"
                     @click="editCarDialog('create',{})">添加</el-button>
        </el-col>
        <el-col :span="18"
                align="right">
          <el-select v-model="requestParam.status"
                     placeholder="请选择绑定状态">
            <el-option v-for="item in carStatusList"
                       :key="item.value"
                       :label="item.name"
                       :value="item.value"></el-option>
          </el-select>
          <el-select v-model="requestParam.car_type"
                     placeholder="请选择车辆类型">
            <el-option label="全部类型"
                       value=""></el-option>
            <el-option v-for="(item, index) in carTypeList"
                       :key="index"
                       :label="item.car_type"
                       :value="item.id"></el-option>
          </el-select>
          <el-input v-model="requestParam.leader_or_car_num"
                    placeholder="输入司机姓名或车牌号"
                    class="carNum-input"></el-input>
          <el-button @click="getCarList"
                     type="primary">查询</el-button>
        </el-col>
      </el-col>
      <el-col :span="24"
              class="carMain-table">
        <el-table :highlight-current-row="true"
                  :data="carListData.data"
                  border
                  :header-cell-style="{background:'#f5f5f5'}">
          <el-table-column type="index"
                           label="序号"
                           align="center"
                           width="100"
                           show-overflow-tooltip></el-table-column>
          <el-table-column prop="car_num"
                           label="车牌号"
                           align="center"
                           show-overflow-tooltip></el-table-column>
          <el-table-column prop="car_type_name"
                           label="车辆类型"
                           align="center"
                           show-overflow-tooltip></el-table-column>
          <el-table-column prop="leader"
                           label="司机姓名"
                           align="center"
                           show-overflow-tooltip></el-table-column>
          <el-table-column prop="leader_phone"
                           label="联系电话"
                           align="center"
                           show-overflow-tooltip></el-table-column>
          <el-table-column prop="bdPosition"
                           label="北斗定位"
                           align="center"
                           show-overflow-tooltip></el-table-column>
          <el-table-column prop="car_status_name"
                           label="绑定状态"
                           align="center"
                           show-overflow-tooltip></el-table-column>
          <el-table-column prop="carLocus"
                           label="车辆轨迹"
                           align="center"
                           show-overflow-tooltip></el-table-column>
          <el-table-column label="操作"
                           width="200"
                           align="center">
            <template slot-scope="scope">
              <el-button type="text"
                         @click="editCarDialog('detail',scope.row)">详情</el-button>
              <el-button @click="editCarDialog('update',scope.row)"
                         type="text">编辑</el-button>
              <el-button @click="deleteCarConfirm(scope.row)"
                         type="text">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="24"
              align="center">
        <el-pagination @current-change="handlePageChange"
                       @size-change="handleSizeChange"
                       :current-page="requestParam.page"
                       :page-size="requestParam.per_page"
                       :page-sizes="[15,20,30,40,50,100]"
                       layout="total,sizes,prev, pager, next, jumper"
                       background
                       :total="carListData.total"
                       align="center"></el-pagination>
      </el-col>
    </el-row>
    <EditCarDialog :dialogVisible.sync="editCarDialogVisible"
                   :dialogForm="editCarDialogForm"
                   :dialogStatus="editCarDialogStatus"
                   @callback="editCallback"></EditCarDialog>
  </div>
</template>
<script>
import { CarListApi } from "@/services/WorkCenter";
import { standardCodeApi } from "@/services/StandardCode";
import EditCarDialog from "./components/EditCarDialog";
export default {
  data () {
    return {
      requestParam: {
        page: 1,
        per_page: 15,
        leader_or_car_num: "",
        car_type: "",
        status: ""
      },
      value: "",
      options: [],
      carListData: {
        list: [],
        total_page: 0,
        total_count: 0
      },
      // 编辑车辆弹框是否可见
      editCarDialogVisible: false,
      // 编辑车辆弹框数据对象
      editCarDialogForm: {},
      // 编辑车辆弹框状态
      editCarDialogStatus: "create",
      // 车辆类型列表
      carTypeList: [],
      // 车辆状态列表
      carStatusList: []
    };
  },
  components: {
    EditCarDialog
  },
  methods: {
    // 分页
    handlePageChange (page) {
      this.requestParam.page = page;
      this.getCarList();
    },
    // 每页条数修改
    handleSizeChange (size) {
      this.requestParam.per_page = size;
      this.getCarList();
    },
    // 跳转到添加车辆页面
    addCar () {
      this.$router.push("/addCar");
    },
    // 跳转到详情页面
    goToDetail () {
      this.$router.push("/carDetail");
    },

    // 获取车辆类型
    getCarType () {
      CarListApi.getCarType({
        params: {
          page: 1
        }
      }).then(
        res => {
          console.log(res, "get car type");
          let data = res.data;
          if (data.data) {
            this.carTypeList = data.data;

            window.localStorage.setItem(
              "carTypeList",
              JSON.stringify(this.carTypeList)
            );
          }
        },
        err => {
          console.log(err);
        }
      );
    },
    // 获取车辆列表数据
    getCarList () {
      CarListApi.getCarList({
        params: this.requestParam
      }).then(
        res => {
          console.log(res, "get car list");
          if (res.code === 0) {
            this.carListData = res.data;
            this.carListData.data.map(item => {
              item.car_type_name = this.getCarTypeName(item.car_type);
              item.car_status_name = this.getCarStatusName(item.status);
            });
          }
        },
        err => {
          console.log(err);
        }
      );
    },
    // 展示编辑车辆弹框
    editCarDialog (type, data) {
      this.editCarDialogForm = data;
      this.editCarDialogStatus = type;
      this.editCarDialogVisible = true;
    },
    // 新增或编辑车辆弹框成功回调
    editCallback () {
      this.getCarList();
    },
    // 删除车辆确认弹框
    deleteCarConfirm (row) {
      let deleteCar = {
        id: row.car_id
      };
      this.$confirm("是否删除该车辆？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.deleteCar(deleteCar);
        })
        .catch(() => { });
    },
    // 删除车辆接口操作
    deleteCar (data) {
      CarListApi.deleteCar({
        data: data
      }).then(res => {
        if (res.code === 0) {
          this.$message.success("删除成功");
          this.getCarList();
        }
      });
    },
    // 根据车辆类型id获取车辆类型的名称
    getCarTypeName (type) {
      let name = "";
      this.carTypeList.map(item => {
        if (item.value === type) {
          name = item.name;
        }
      });
      console.log(this.carTypeList, "car type");
      return name;
    },
    // 根据绑定状态value获取绑定状态名称
    getCarStatusName (value) {
      let carStatusValue = value;
      let name = "";
      this.carStatusList.map(item => {
        if (item.value === carStatusValue) {
          name = item.name;
        }
      });
      return name;
    },
    // 获取绑定状态标准码
    getStatusCode () {
      standardCodeApi
        .getStandardCodeData({
          data: {
            code_type: "carStatus"
          }
        })
        .then(
          res => {
            console.log(res, "get car status");
            if (res.code === 0 && res.data.list) {
              this.carStatusList = res.data.list;
              this.carStatusList.unshift({ name: '全部状态', value: '' })
            }
          },
          err => {
            console.log(err);
          }
        );
    },
    // 获取车辆类型标准码
    getCarTypeCode () {
      standardCodeApi
        .getStandardCodeData({
          data: {
            code_type: "car_type"
          }
        })
        .then(
          res => {
            console.log(res, "get car type");
            if (res.code === 0 && res.data.list) {
              this.carTypeList = res.data.list;
              window.localStorage.setItem(
                "carTypeList",
                JSON.stringify(this.carTypeList)
              );
            }
          },
          err => {
            console.log(err);
          }
        );
    }
  },
  async created () {
    let localTypeList = localStorage.getItem("carTypeList");
    if (localTypeList) {
      this.carTypeList = JSON.parse(localTypeList);
    } else {
      await this.getCarTypeCode();
    }
    await this.getStatusCode();
    this.getCarList();
  }
};
</script>
<style lang="scss" scoped>
.carManage {
  padding: 20px;

  .carTop-col {
    margin-bottom: 20px;
    .carNum-input {
      width: 28%;
    }
  }
  .carMain-table {
    margin-bottom: 20px;
  }
}
</style>
